<!-- bootstrap样式表 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 时间选择器样式表 -->
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">


<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- bootstrap脚本 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 时间选择器前置脚本 -->
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>

<!-- 时间选择器核心脚本 -->
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<!--引入layui-->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<style>
    .tab-content > .chart {
        padding: 10px;
    }
</style>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>视频批量修改</legend>
</fieldset>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 580px">机场单位</label>
                <div class="layui-input-inline">
                    <select name="modules" id="modules"  lay-search="">
                        <option value="">直接选择或搜索选择</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</form>
<div id="test7" class="demo-transfer"></div>
<!--<div class="layui-row" style="margin:20px auto;">-->
<!--<div class="layui-col-md8" style="text-align: center">-->
<!--<button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>-->
<!--</div>-->
<!--</div>-->
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script>
    layui.use(['form','transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,form = layui.form
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;
        list();
        $.post('transfer/videos', {}, function(str){
            transfer.render({
                elem: '#test7',
                data: str.data,
                width:500,
                height:600,
                id: 'key123', //定义唯一索引
                title: ['视频', '所属视频'],
                value: ['2', '5', '9'],
                showSearch: true,
                onchange: function(data, index){
                    var modules=$('#modules').val();
                    if(modules>0){
                        //如果数据来自左边，index 为 0，否则为 1
                        var num=[];
                        for(var i=0;i<data.length;i++){
                            num.push(data[i]['id']);
                        }
                        if(index==1){
                            console.log(data); //视频分配到机场
                            var d0={
                                modules:modules,
                                ids:num.join(','),
                            };
                            $.post('transfer/quchuvideos',d0,function () {
                                zhenshuju();
                            })
                        }else {
                            console.log(num);//从机场去掉视频
                            var d1={
                                modules:modules,
                                ids:num.join(','),
                            };

                            $.post('transfer/tianjiavideos',d1,function () {
                                zhenshuju();
                            })
                        }
                    }else {
                        layer.msg('请选择机场单位');
                        zhenshuju();
                    }

                }
            })
        });
        form.on('select', function(data){
            console.log(data.value); //得到被选中的值
            shuju(data.value);
        });
        //模拟数据
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                layer.alert(JSON.stringify(getData));
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    value: ['2', '5', '9']
                    ,showSearch: true
                })
            }
        });
        function list(){
            $.post('category/index', {}, function(strn){
                var data=strn.rows;
                var content = '';
                content += '<option value="">直接选择或搜索选择</option>';
                for (var key in data) {
                    var jsonstr = data[key];
                    content += '<option value=\"' + jsonstr.id + '\">' + jsonstr.name + '</option>'
                }
                $("#modules").html(content);
                form.render();   //这里就是我们要渲染的地方了
            });
        }
        function zhenshuju() {
            var modules=$('#modules').val();
            if(modules>0){
                shuju(modules);
            }else {
                transfer.reload('key123', {
                    value: []
                    ,showSearch: true
                });
            }
        }
        function shuju(cate_id){
            $.post('transfer/cate_videos', {cate_id:cate_id}, function(data){
                transfer.reload('key123', {
                    value: data.data
                    ,showSearch: true
                })
            });
        }

    });
</script>